import { View, Text } from 'react-native'
import React from 'react'

import { Dimensions, PixelRatio } from 'react-native'

import Divide from '../commonComponents/divide'
import { getAllKeysAndProtoKeys_fromObj } from '../utils/index'

const { width, height } = Dimensions.get('window')
const dpWidth = PixelRatio.roundToNearestPixel(width / PixelRatio.get())
const dpHeight = PixelRatio.roundToNearestPixel(height / PixelRatio.get())

// 在 React Native 中，设置高度和宽度的单位是逻辑像素（dp，即密度无关像素）。React Native 使用 dp 单位来实现跨平台的布局一致性，以适应不同像素密度的设备。React Native 提供了 PixelRatio API 来进行逻辑像素（dp）和物理像素（px）之间的转换。要将逻辑像素（dp）转换为物理像素（px），您可以使用 PixelRatio.getPixelSizeForLayoutSize() 方法
const dpWidth_dp = 100 // 逻辑像素（dp）
const dpHeight_dh = 100 // 逻辑像素（dp）
const pxWidth_px = PixelRatio.getPixelSizeForLayoutSize(dpWidth) // 物理像素（px）
const pxHeight_dh = PixelRatio.getPixelSizeForLayoutSize(dpHeight_dh) // 物理像素（px）
// console.log('逻辑宽度100（dp）:', dpWidth_dp);
// console.log('物理宽度是多少呢？（px）:', pxWidth_px);
// console.log('逻辑高度100（dp）:', dpWidth_dp);
// console.log('物理高度是多少呢？（px）:', pxHeight_dh);

// console.log('设备宽度（px）:', width);
// console.log('设备高度（px）:', height);
// console.log('设备宽度（dp）:', dpWidth);
// console.log('设备高度（dp）:', dpHeight);

export default class classView65 extends React.Component {
  constructor(props) {
    super(props)
    this.staticData = {
      dpWidth,
      dpHeight,
      dpWidth_dp,
      pxWidth_px
    }
    this.state = {
      address: '江苏省南京市'
    }
    this.timer = null
    // console.log('constructor__', '执行');
  }

  componentDidMount() {
    this.timer = setTimeout(() => {
      console.log(Object.keys(this))
      console.log(getAllKeysAndProtoKeys_fromObj(this.props))
      // 更新address
      this.setState((oldVal) => {
        // console.log(
        //   '🚀 ~ file: 6_5ClassView.jsx:53 ~ classView65 ~ this.timer=setTimeout ~ oldVal:',
        //   Object.keys(oldVal) + '\t',
        //   oldVal.address,
        // );
        return { address: '浙江省杭州市' }
      })
    }, 3000)

    // console.log('componentDidMount__', '执行');
  }

  componentWillUnmount() {
    this.timer && clearTimeout(this.timer)
  }

  render() {
    // console.log('render函数__', '执行', this.props);
    const { name, age, level, sex, isManry } = this.props
    const { address } = this.state

    return (
      <View style={{ width: '100%', height: 'auto', backgroundColor: '#888' }}>
        <Text style={{ fontSize: 20, color: 'white' }}>
          {`name=${name}, age=${age}, level=${level}, sex=${sex}`}
        </Text>
        <Text style={{ fontSize: 20, color: 'black' }}>{address}</Text>
        <Text style={{ fontSize: 20, color: 'black' }}>
          {'isManry(boolean): ' + isManry}
        </Text>

        <Divide />
        <Text style={{ fontSize: 20, color: 'pink' }}>
          {'dpWidth: ' + dpWidth}
        </Text>
        <Text style={{ fontSize: 20, color: 'pink' }}>
          {'dpHeight: ' + dpHeight}
        </Text>

        <Divide />
        <Text style={{ fontSize: 20, color: 'green' }}>
          100dpWidth转换成pxWidth
        </Text>
        <Text style={{ fontSize: 20, color: 'pink' }}>
          {'dpWidth_dp: ' + dpWidth_dp}
        </Text>
        <Text style={{ fontSize: 20, color: 'pink' }}>
          {'pxWidth_px: ' + pxWidth_px}
        </Text>

        <Divide />
        <Text style={{ fontSize: 20, color: 'black' }}>
          {`PixelRatio.get(): ` + PixelRatio.get()}
        </Text>

        <Divide />
        <View style={{ width, backgroundColor: 'green', height: 30 }}>
          <Text style={{ fontSize: 20, color: 'red' }}>
            {'width: ' + width.toFixed(2) + ', height: ' + height.toFixed(2)}
          </Text>
        </View>

        <Divide backgroundColor={'blue'} />
        <View
          style={{ width: '300', backgroundColor: 'pink', height: 10 }}></View>
      </View>
    )
  }
}
